<template>
  <div class="container">
    <uv-navbar bg-color="linear-gradient(to right, #FFF8EE, #E5FDFB)" placeholder title="消息中心" />

    <view class="tabs flex alignCenter  bold">
      <view @click="current=index" :class="{active:current==index}" v-for="(item,index) in tabs" :key="index" class="tab">{{item.name}}</view>
    </view>

    <!-- <view class="types flex alignCenter justifyBetween">
      <view class="item left" @click="proxy.$utils.toLink('/packagePages/user/friendApplyList')">查看申请</view>
      <view class="item right">互动记录</view>
    </view> -->

    <!-- 我的消息 -->
    <view class="list" v-if="current==0">
      <view v-if="chats.news.length">
        <view class="title bold fz16">最新消息</view>
        <view v-for="(item,index) in chats.news" :key="index">
          <chatItem :item="item"></chatItem>
        </view>
      </view>

      <view v-if="chats.history.length">
        <view class="title bold fz16">历史聊天</view>
        <view v-for="(item,index) in chats.history" :key="index">
          <chatItem :item="item"></chatItem>
        </view>
      </view>
    </view>

    <!-- 我的好友 -->
    <view v-else class="my-friends">
      <view class="search">
        <uv-search :showAction="false" placeholder="请输入搜索内容" v-model="keyword" bgColor="#fff"></uv-search>
      </view>
      <view class="friends">
        <view @click="proxy.$utils.toLink(`/packagePages/user/details?id=${item.userId}`)" class="flex box alignCenter" v-for="(item,index) in list" :key="index">
          <uv-image width="50px" height="50px" :src="item.avatar" shape="circle"></uv-image>
          <view class="info width100" :style="infoStyle(index,list)">
            <view class="bold fz14">{{item.nickname}}</view>
            <view class="desc fz12">{{item.ageYear}}·{{item.industry}}·{{item.homeEconomize}}·{{item.city}}</view>
          </view>
        </view>
      </view>
    </view>

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import chatItem from "@/pages/tabbar/tabbar-3/components/chatItem.vue";
//im
import YeIMStore from "@/stores/YeIM";
const YeIM = YeIMStore();

let tabs = ref([{ name: "我的消息" }, { name: "我的好友" }]);
let current = ref(0);
let keyword = ref("");
let scrollTop = ref(0);
let params = ref({
  keyword: "",
  page: 1,
  pageSize: 10,
});
let list = ref([]);
let totalPages = 0;

let chats = computed(() => {
  let arr = [...YeIM.chats];
  let list1 = [];
  let list2 = [];
  arr.forEach((element) => {
    if (element.unread) {
      list1.push(element);
    } else {
      list2.push(element);
    }
  });
  return { news: list1, history: list2 };
});

onShow(() => {
  getInfo();
  uni.showTabBar();
  //uni.hideTabBarRedDot({ index: 2 });
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

function infoStyle(index, list) {
  if (index == list.length - 1) {
    return { borderColor: "transparent" };
  } else {
    return { borderColor: "#f1f1f1" };
  }
}

function iconStyle() {
  let right = 0;
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  right = menuButtonInfo.width;
  // #endif
  return {
    paddingRight: `${right}px`,
  };
}

function toLink(path, row) {
  let { lastMessage } = row;
  let url = proxy.$utils.buildUrl(path, {
    userId:
      lastMessage.from == lastMessage.userId
        ? lastMessage.to
        : lastMessage.from,
  });
  proxy.$utils.toLink(url);
}

async function getInfo() {
  let resp = await proxy.$apis.getContacts(params.value);
  if (resp.records.length) {
    list.value = proxy.$utils.filterArr([...list.value], resp.records, "id");
  }
  totalPages = resp.totalPages;
  console.log("关注的人", list.value);
}
</script>



<style lang="scss" scoped>
.container {
  padding: 15px;
  min-height: 100vh;
  background: url("https://cos.qcshejiao.com/qc/xcxui/ig/80941.png");
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  //background-position: contain; /* 背景图片居中 */
  background-attachment: fixed;
  .tabs {
    .tab {
      color: #b6bcce;
      margin-right: 15px;
    }
    .active {
      color: #99a1be !important;
    }
  }
  .list {
    margin-top: 15px;
    .title {
      margin-bottom: 10px;
      color: #99a1be;
    }
    .chat-item {
    }
  }

  .my-friends {
    .search {
      margin-top: 15px;
    }
    .friends {
      margin-top: 15px;
      background: white;
      border-radius: 20px;
      .box {
        padding: 15px 15px 0 15px;
        .info {
          margin-left: 10px;
          border-bottom: 1px solid #f1f1f1;
          padding-bottom: 5px;
          .desc {
            color: #929292;
            margin-top: 2px;
          }
        }
      }
    }
  }
}
</style>



